

import { ElSubMenu, ElMenuItem } from 'element-plus'
import { ComputedRef, unref } from 'vue'
import { hasOneShowingChild } from '../helper'
import { isUrl } from '@/utils/is'
import { useRenderMenuTitle } from './useRenderMenuTitle'
import { pathResolve } from '@/utils/routerHelper'
import { useDesign } from '@/hooks/web/useDesign'

const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('submenu')

const { renderMenuTitle } = useRenderMenuTitle()

export const useRenderMenuItem = (options: {
  menuMode: ComputedRef<'vertical' | 'horizontal'>
  onSubMenuClick?: (index: string, indexPath: string[], item: any) => void
}) => {
  const { menuMode, onSubMenuClick } = options
  // 递归查找第一个可显示的子菜单路径
// 查找第一个可显示的子路由路径
const findFirstChildPath = (children: AppRouteRecordRaw[], basePath: string): string => {
  if (!children || children.length === 0) return basePath
  
  // 过滤掉隐藏的路由
  const visibleChildren = children.filter(child => !child.meta?.hidden)
  if (visibleChildren.length === 0) return basePath
  
  const firstChild = visibleChildren[0]
  const fullPath = pathResolve(basePath, firstChild.path)
  
  // 如果子路由还有子路由，继续查找
  if (firstChild.children && firstChild.children.length > 0) {
    return findFirstChildPath(firstChild.children, fullPath)
  }
  
  return fullPath
}


  const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/') => {
    return routers
      .filter((v) => !v.meta?.hidden)
      .map((v) => {
        const meta = v.meta ?? {}
        const { oneShowingChild, onlyOneChild } = hasOneShowingChild(v.children, v)
        const fullPath = isUrl(v.path) ? v.path : pathResolve(parentPath, v.path)

        if (
          oneShowingChild &&
          (!onlyOneChild?.children || onlyOneChild?.noShowingChildren) &&
          !meta?.alwaysShow
        ) {
          const childPath = onlyOneChild ? pathResolve(fullPath, onlyOneChild.path) : fullPath
          return (
            <ElMenuItem index={childPath}>
            {{
              default: () => renderMenuTitle(onlyOneChild?.meta ?? meta)
            }}
          </ElMenuItem>
            // <ElMenuItem
            //   index={onlyOneChild ? pathResolve(fullPath, onlyOneChild.path) : fullPath}
            // >
            //   {{
            //     default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta)
            //   }}
            // </ElMenuItem>
          )
        } else {
          return (
            <ElSubMenu
              index={fullPath}
              teleported
              popperClass={unref(menuMode) === 'vertical' ? `${prefixCls}-popper--vertical` : ''}
               // 通过title插槽添加点击事件
               v-slots={{
                title: () => (
                  <div 
                    class="submenu-title-wrapper"
                    onClick={(e) => {
                      e.stopPropagation()
                      if (onSubMenuClick && v.children?.length) {
                        const firstChildPath = findFirstChildPath(v.children, fullPath)
                        const indexPath = [fullPath, firstChildPath] // 补充 indexPath 参数
                        onSubMenuClick(firstChildPath, indexPath, { ...v, firstChildPath }) // 修复调用
                      }
                    }}
                  >
                    {renderMenuTitle(meta)}
                  </div>
                ),
                default: () => renderMenuItem(v.children!, fullPath)
              }}
            >
              {{
                title: () => renderMenuTitle(meta),
                default: () => renderMenuItem(v.children!, fullPath)
              }}
            </ElSubMenu>
          )
        }
      })
  }

  return {
    renderMenuItem
  }
}